<template>
	<view class="content">
		<view class="customertools">
			<view class="name" @click="goImage">
				<view class="name-a"> 头像 </view>
				<view class="name-b">
					<image src="../../static/303.jpg" mode="" v-if="!avatar"></image>
					<image :src="avatar" mode="" v-else></image>
					<uni-icons type="right" disabled="" size="22" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="name">
				<view class="name-a"> 昵称 </view>
				<view class="name-b">
					<input type="text" placeholder="姓名" v-model="nickName" />
					<uni-icons type="right" size="22" color="#999999"></uni-icons>
				</view>
			</view>
			<view class="name">
				<view class="name-a"> 手机号 </view>
				<view class="name-b">
					<input type="text" placeholder="手机号" v-model="phone" disabled="" />
					<!-- <uni-icons type="right" size="22" color="#999999"></uni-icons> -->
				</view>
			</view>
			<button class="butt" @click="modifyTakeInfo">确认修改</button>
			<!-- 			<view class="name">
				<view class="name-a">
					隐私协议
				</view>

			</view> -->
		</view>
	</view>
</template>
<script>
	import {
		onlineInfo,
		modifyTakeInfo,
		memberInfo,
	} from "../../request/api.js"
	import {
		requestPermissions
	} from "@/js_sdk/yu-app-permission/yu-app-permission.js"
	export default {
		data() {
			return {
				shou: false,
				userInfo: null,
				aliAccount: '',
				avatar: '',
				nickName: '',
				phone: '',
				hide: '',
				personalinformation: {}
			}
		},
		onLoad() {},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.personal = uni.getStorageSync('userInfo')
			this.memberInfo()
		},
		methods: {
			memberInfo() {
				memberInfo({
					id: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.avatar = res.result.avatar
					this.nickName = res.result.nickName
					this.phone = res.result.mobile
					this.personalinformation = res.result
					uni.setStorageSync('userInfo', res.result);
				})
			},
			onlineInfo() {
				onlineInfo().then(res => {
					console.log(res, '个人信息');
					uni.setStorageSync('userInfo', res.result);
					this.userInfo = uni.getStorageSync('userInfo')
				})
			},
			modifyTakeInfo() {
				modifyTakeInfo({
					avatar: this.avatar,
					nickName: this.nickName,
					id: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res, uni.getStorageSync('userInfo').id, '成功');
					if (res.result == 1) {
						uni.showToast({
							title: '修改成功',
							icon: "none",
							mask: true
						})
					} else {
						uni.showToast({
							title: '修改失败',
							icon: "none",
							mask: true
						})
					}
					// this.onlineInfo()
					this.memberInfo()
				})
			},
			queryByIds() {
				queryById({
					id: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res);
					this.personal = res.result.records[0]
					uni.setStorageSync('userInfo', res.result.records[0])
					console.log(this.personal);
				})
			},
			// updates() {
			// 	update(this.personal).then(res => {
			// 		console.log(res);
			// 		this.queryByIds()
			// 		uni.showToast({
			// 			title: '修改成功',
			// 			icon: 'none'
			// 		})
			// 	})
			// },
			async goImage() { // 权限检测成功则返回 { isSuc : true} ,未授权则弹出权限询问弹窗以及权限说明窗口
				// ios
				// const {
				// 	isSuc
				// } = await requestPermissions({
				// 	title: "相机/摄像头权限申请说明", // 申请权限时弹出框标题
				// 	content: "便于您使用该功能拍照上传您的照片用于更换头像场景中使用", // 申请权限时弹出框内容
				// 	permissionID: "LOCATION" // 权限ID
				// })
				// if (!isSuc) {
				// 	return false
				// }
				uni.chooseImage({
					success: (res) => {
						// console.log(res);
						this.getPic(res.tempFilePaths)
					}
				});
			},
			async getPic(picUrl) {
				let that = this;
				for (var i = 0; i < picUrl.length; i++) {
					// console.log(picUrl[i]);
					try {
						let res = await uni.uploadFile({
							url: getApp().globalData.url + '/api/common/upload',
							filePath: picUrl[i],
							header: {
								'X-Access-Token': uni.getStorageSync('token')
							},
							name: 'file',
						});
						let a = JSON.parse(res.data);
						console.log(a, "上传结果b");
						console.log(a.message, '图片列表');
						// that.imagesUrl.push(a.message);
						// this.avatar = getApp().globalData.url + '/' + a.message
						this.avatar = a.message
						this.userInfo.avatar = this.avatar
						uni.setStorageSync('userInfo', this.userInfo)
						// this.personal.avatar = a.message
						console.log(this.img, '照片地址');
						// this.updates()
					} catch (error) {
						console.error(error);
					}
				}
				// let b = this.imagesUrl
				// this.image = b.join(',')
			},
		}
	}
</script>
<style lang="scss" scoped>
	.butt {
		background: #FF9C33;
		border-radius: 42rpx;
		color: #FFFFFF;
		margin-top: 150rpx;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 0px;
		background: #f7f7f7;
		padding-top: 20rpx;
		padding-bottom: 50rpx;
	}

	.customertools {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 42rpx;
		padding: 10rpx 62rpx 30rpx 40rpx;
		box-sizing: border-box;

		.name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 14rpx;
			border-bottom: 4rpx solid #f3f2f2;
			margin-top: 42rpx;

			.name-a {
				// width: 80%;
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
			}

			.name-b {
				// width: 20%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50rpx;
					margin-right: 15rpx;
				}

				// input {
				// 	width: 100%;
				// }
			}
		}

		.add {
			margin-top: 150rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addhui {
				width: 276rpx;
				height: 62rpx;
				border-radius: 6rpx;
				background: #d8d8d8;
				color: #999999;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 62rpx;
			}

			.addhong {
				width: 276rpx;
				height: 62rpx;
				border-radius: 6rpx;
				background: #e60012;
				color: #ffffff;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 62rpx;
			}
		}
	}

	.dibu {
		position: fixed;
		bottom: 0;
		margin: 24rpx;
		border-radius: 42rpx;
		padding: 42rpx 62rpx 30rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.add {
			width: 100%;
			// margin-top: 550rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addhui {
				width: 276rpx;
				height: 62rpx;
				border-radius: 6rpx;
				background: #d8d8d8;
				color: #999999;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 62rpx;
				margin-right: 70rpx;
			}

			.addhong {
				width: 276rpx;
				height: 62rpx;
				border-radius: 6rpx;
				background: #e60012;
				color: #ffffff;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 62rpx;
			}
		}
	}
</style>